<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-1.10.1.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        .list li {
            line-height: 32px;
            border: 1px solid rgb(114, 113, 109);
            width: 100px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="wrap">
        <h2>jQuery初识</h2>
        <div class="list">
            <li class="first">01</li>
            <li>02</li>
            <li class="mid">03</li>
            <li>04</li>
            <li>05</li>
            <li class="last">06</li>
        </div>
    </div>
</body>
<script>
    // 层级关系
    // 子元素  父元素  同级

    // 子元素
    // children()  获取匹配元素的子元素
    console.log($(".list").children());
    // children(selector)  接收一个字符串作为筛选条件
    console.log($(".list").children("li"));


    // 子节点 
    // contents()  获取匹配元素的子节点
    console.log($(".list").contents());
    // contents(selector)  接收一个字符串作为筛选条件
    console.log($(".list").contents(".first"));


    // 父元素
    // parent()  获取匹配父元素
    console.log($(".list").parent());


    // parents  获取匹配父代元素的集合
    console.log($(".first").parents());
    // parents(selector)  接收一个选择器作为筛选条件
    console.log($(".first").parents("list"));
    // parentsUntil(selector)  查找当前元素的所有父元素，直到遇到匹配的那个元素
    console.log($(".first").parentsUntil("#wrap"));


    // prev()  匹配前一个同级元素
    $(".last").prev().css({ background: "#A1C8FE" });
    // prevAll()  匹配前面所有的同级元素
    $(".last").prevAll().css({ background: "#A1C8FE" });
    // prevUntil()  查找当前元素之前的所有的同级元素，直到遇到匹配的那个元素以外
    $(".last").prevUntil(".mid").css({ background: "#401934" });


    // next()       匹配后一个同级元素
    $(".first").next().css({ background: "#CA8E98" });
    // nextAll()    匹配后面所有的同级元素
    $(".first").nextAll().css({ background: "#CA8E98" });
    // nextUntil()  查找当前元素之后的所有的同级元素，直到遇到匹配的那个元素以外
    $(".first").nextUntil(".mid").css({ background: "#401934" });



    // find()   搜索与指定表达式匹配的元素
    // 通过父元素查找指定的子代元素(链式查找流程)
    $("#wrap").find(".last").css({ background: "#344E45" })


    // end()  回到最近的一个'破坏性'操作之前  即 将匹配的元素列表变为前一次的状态。(返回上一级)
    console.log($("#wrap").find(".last").css({ color: "white" }));
    console.log($("#wrap").find(".last").css({ color: "white" }).end());




</script>

</html>